<template>
  <div>
    <BreakSpace label="旧件不回运明细" :containerStyle="{ marginBottom: '10px' }" />
    <FormPanel ref="infoMain" :list="formList" labelWidth="110" :formType="type" @formChange="changeHandle" :isSubmitBtn="false" />
    <div>
      <BreakSpace label="保修旧件列表" :containerStyle="{ marginBottom: '10px' }" />
      <FilterTable
        ref="table1"
        :columns="columns"
        :params="fetchParams"
        :datakey="'records'"
        :isSelectColumn="false"
        columnsRef="notification_maintain_index_01"
        :onColumnsChange="(columns) => (this.columns = columns)"
      >
      </FilterTable>
    </div>
    <div>
      <BreakSpace label="审核说明" :containerStyle="{ marginBottom: '10px' }" />
      <FormPanel :cols="3" :list="form" :formType="type" :isSubmitBtn="false" ref="infoResponse" columnsRef="notification_maintain_index_02" :onColumnsChange="(columns) => (this.columns = columns)" />
    </div>
    <div>
      <BreakSpace label="审核操作历史" :containerStyle="{ marginBottom: '10px' }" />
      <FilterTable
        ref="zctable"
        :columns="czcolumns"
        :params="fetchParams"
        :datakey="'records'"
        :isSelectColumn="false"
        columnsRef="notification_maintain_index_03"
        :onColumnsChange="(columns) => (this.czcolumns = columns)"
      >
      </FilterTable>
    </div>
    <div class="dialogBottmView">
      <el-button size="small" type="primary" class="btnStyle" @click="closeMenu('3')">返回 </el-button>
    </div>
     <Drawer :visible.sync="visibleEdit" :title="'索赔单明细'" destroyOnClose width="100%" :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
        <editForm @close="editclose" @save="editsave" :rowData="rowData"></editForm>
    </Drawer>
  </div>
</template>

<script>
import editForm from '@/pages/claimDemage/BasicData/ClaimQueryFactory/editForm.vue';
import { getExecutionStatusDetail, getExecutionStatusForExport } from '@/api/repair/batchEventManagement/activityExecutionStatusQueryCDuan';

import { dealerMixin } from '@/pages/repair/batchEventManagement/dealerMixin';
import {
  getListByPage,selectOneById
} from '@/api/usedPartsReturnManage/usedPartsReturn_OEM/usedPartsNoReturn';
import { dictionary } from '@/utils/dictMixin';
import {  getByPermissionCtrl } from '@/api/dictionary/index.js';
import { exportExcelFile } from '@/utils/index';
import config from '@/assets/js/config';

export default {
  name: 'detail',
  mixins: [dictionary, dealerMixin],
  /*handleType show   活动审核  show-1  索赔审核*/
  props: ['nrId'],
  data() {
    this.saveData = null;
    return {
      uploadPrefix: config.uploadUrl,
      appendixName: '',
      columns: this.createTableColumns(),
      czcolumns: this.createCzTableColumns(),
      formList: this.createFormList(),
      form: this.createForm(),
      visibleVin: false,
      visibleSport: false,
      visiblePeij: false,
      visibleMainCode: false,
      visibleEdit:false,
      fetchParams: { xhrAbort: true },
      fetchParamPeij: { xhrAbort: true },
      fetchParamSport: { xhrAbort: true },
      fetchParamSuopei: { xhrAbort: true },
      fetchApiPeij: '',
      fetchApi: '',
      fetchApiSport: '',
      fetchApiSuopei: '',
      fetchapiVin: getExecutionStatusDetail,
      fetchParamsVin: { xhrAbort: true },
      onChangeColumn: [],
      vinArr: [] /**/,
      sportArr: [],
      peijArr: [],
      fujArr: [],
      status: 1 /*1  表单选择  2 新建配件*/,
      detailObj: {},
      imageList: [],
      UploadFileIsShow: false,
      rowData:{}
    };
  },
  components: {editForm},
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;

    // this.BaseSuopeiTable = this.$refs.tableSuopei.$refs.pageTable;

    // this.getAllDelears(this.columns, ['resDealer', 'updateCode', 'salesDealer'], 'table');


    this.initSelect();

    this.getUnit();
  },
   async created(){
      await this.chuqi();
      await this.init(this.nrId);

  },
  methods: {

      async init(val) {
      let newVar = await selectOneById({ nrId: val });
      this.editData = newVar.data;
      console.log('=== 通过ID查询结果返回 ==== ', newVar, ' ======');
      this.month = newVar.data.month;
      this.ownerCode = newVar.data.ownerCode;
      this.dealerName = newVar.data.dealerName;
      this.nrId = newVar.data.nrId;
      this.whId = newVar.data.whId;
      this.whName = newVar.data.whName;
      this.rowData = newVar.data.noReturnPartDtoList[0];

      this.$refs.table1.$refs.pageTable.EXECUTE_INSERT(newVar.data.noReturnPartDtoList);
      this.$refs.zctable.$refs.pageTable.EXECUTE_INSERT(newVar.data.logList);

      this.form.forEach(x => {//optRemark
          x.initialValue = newVar.data.optRemark;

      });

      this.formList.forEach(x => {
        // console.log(newVar,"单号");
        x.initialValue = newVar.data[x.fieldName];

      });
        const files = [];
          newVar.data.fileList.forEach((name, index) => {
            files.push({
              name: name.title,
              url: name.fileUrl,
            });
          });
          console.log(111, files);

          // 数据赋值
          this.formList.find((x) => {
            x.fieldName === 'fileList' && (x.initialValue = files);
          });
    },
    cheageselect(data) {
      console.log(data);
      this.txt.data;
    },
    async getUnit() {},

    async initSelect() {
      // this.getAllUsers(this.columnSuopei, ['createdBy'], 'table');
    },

    //旧件仓库下拉框
    async chuqi() {
      console.log('===== 获取下拉框数据 ====== ');
      const res = await getByPermissionCtrl();
      console.log('==========', res,666);
      // if (res.resultCode == 200 && res.data) {
      //   this.formList.find(x => x.fieldName == 'whCode').itemList = res.data.map(y => ({ text: y.whName, value: y.whCode }));
      // }
    },

    claimDetail() {
      // this.rowData = val;
      // this.visibleEdit = true;
      // console.log(this.rowData['claimId'],"this.rowData",this.claimId)
      this.visibleEdit = true;
    },

    editclose() {
      this.visibleEdit = false;
    },
    editsave() {
      this.visibleEdit = false;
      this.fetchParams = { ...this.fetchParams };
    },

    async closeMenu(type) {
      this.$emit('close');
    },
    closeDialog() {
      this.visibleVin = false;
    },

    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '旧件不回运单号',
          fieldName: 'nrNo',
          itemList: [],
          disabled: true,
          width: 110,
          placeholder: '',
          initialValue: '',
        },
        {
          type: 'INPUT',
          label: '服务中心代码',
          fieldName: 'dealerCode',
          width: 150,
          disabled: true,
          initialValue: '',
        },
        {
          type: 'INPUT',
          label: '服务中心简称',
          fieldName: 'dealerName',
          disabled: true,
          initialValue: '',
        },


        {
          type: 'INPUT',
          label: '联系人',
          fieldName: 'linkMan',
          placeholder: '请选择',
          disabled: true,
          initialValue: '',
        },
        {
          type: 'INPUT',
          label: '联系电话',
          fieldName: 'linkTel',
          placeholder: '请输入',
          disabled: true,
          initialValue: '',
        },
        { type: 'INPUT',
          label: '索赔单号',
          fieldName: 'claimNo',
          placeholder: '请选择',
          initialValue: '',
          readonly:true,
          // disabled: true,
          rules: [{ required: true, message: '必填', trigger: 'blur' }],
          unitRender: p => {
              return (
                  // <div>
                  //   <multiuse-button icon="el-icon-search" onClick={() => this.noReturnItemSelectTurnOn()} />
                  // </div>
                   <div>
                    <multiuse-button icon="el-icon-document" onClick={() => this.claimDetail()}/>
                  </div>
              );
          },
        },
        { type: 'SELECT', label: '索赔类型', fieldName: 'cmsClaimType', placeholder: '请选择', initialValue: '', disabled: true,
           itemList: this.createDictList(5510)
        },
        { type: 'INPUT', label: 'VIN', fieldName: 'vin', placeholder: '请选择', initialValue: '', disabled: true },
        { type: 'INPUT', label: '车型名称', fieldName: 'modelName', placeholder: '请选择', initialValue: '', disabled: true },
        {
          type: 'TEXT_AREA',
          label: '不返件原因说明',
          fieldName: 'remark',
          placeholder: '请选择',
          disabled: true,
          rules: [{ required: false, trigger: 'blur' },{ maxlength: 300, message: '长度最大300字符', trigger: 'blur' },],
          initialValue: '',
          maxlength:300,
          selfCols: 3,
        },

        {
          type: 'UPLOAD_FILE',
          label: '附件',
          disabled: true,
          fieldName: 'fileList',
          disabled: true,
          initialValue: '',
          selfCols: 4,
        },
      ];
    },

    createForm() {
      return [
        {
          type: 'TEXT_AREA',
          label: '审核说明',
          fieldName: 'optRemark',
          placeholder: '请输入',
          disabled: true,
          initialValue: '',
          selfCols: 3,
          rows: 5,
          maxlength: 300,
          rules: [
            { required: false, message: '必填', trigger: 'blur' },
            { maxlength: 300, message: '长度最大300字符', trigger: 'blur' },
          ],
        },
      ];
    },

    //旧件保修列表
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          render: (props) => {
            return <span>{props.row.index + 1}</span>;
          },
        },
        {
          title: '是否主因件',
          dataIndex: 'isMain',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        // {
        //   title: '索赔单号',
        //   dataIndex: 'claimNo',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input',
        //   render: props => {
        //     return (
        //       <div style='text-align:center'>
        //         <multiuse-button size='mini' type='text' onClick={() => this.claimDetail(props.row)}>
        //           {props.row.claimNo}
        //         </multiuse-button>
        //       </div>
        //     );
        //   }
        // },
        // {
        //   title: 'VIN',
        //   dataIndex: 'vin',
        //   width: 150,
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input',
        // },
        // {
        //   title: '车型名称',
        //   dataIndex: 'modelName',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input',
        // },
        // {
        //   title: '索赔类型',
        //   dataIndex: 'cmsClaimType',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input',
        //   editable: false,
        //   filterItems: this.createDictList(5510),
        //   render: props => {
        //     return <span>{this.createDictText(props.row.cmsClaimType, 5510)}</span>;
        //   }
        // },
        {
          title: '旧件代码',
          dataIndex: 'partCode',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '旧件名称',
          dataIndex: 'partName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '责任商代码',
          dataIndex: 'supplierCode',
          sorter: true,
          filter: true,
          filterType: 'input',
        },

        {
          title: '旧件数量',
          dataIndex: 'partCount',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '不回运数量',
          dataIndex: 'nrNum',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '报废标识',
          dataIndex: 'scrapFlag',
          sorter: true,
          filter: true,
          // filterType: 'input',
        },
        {
          title: '报废时间',
          dataIndex: 'scrapAt',
          sorter: true,
          dateFormat: 'yyyy-MM-dd HH:mm:ss',
        },
      ];
    },
    //审核操作列表
    createCzTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          render: (props) => {
            return <span>{props.row.index + 1}</span>;
          },
        },
        { title: '操作人', dataIndex: 'optBy', sorter: true},
        {
          title: '操作状态',
          dataIndex: 'optStatus',
          sorter: true,
          render: props => {
            return <span>{this.createDictText(props.row.optStatus, '5503')}</span>;
          }
        },
        { title: '操作时间', dataIndex: 'optAt',dateFormat: 'yyyy-MM-dd HH:mm:ss', sorter: true },
        { title: '操作说明', dataIndex: 'optRemark', sorter: true}
      ];
    },
  },
};
</script>

<style scoped lang="less">
.bg1 {
  border: 1px solid @borderColor;
  border-radius: @borderRadius;
  box-shadow: @boxShadow;
  padding: @modulePadding;
  padding-left: 0;
  padding-top: 15px;
  padding-bottom: 15px;
}

.bg2 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.btn {
  text-align: center;
}

.btnStyle {
  margin-top: 10px;
}
</style>
